<template>
  <div @click="closeTag()">
    <el-icon>
      <House />
    </el-icon>
    返回知识列表
  </div>
  <!-- <router-link :to="{ name: '知识管理' }">
    <el-icon><House /></el-icon>
    返回知识列表
  </router-link> -->
  <el-descriptions class="margin-top" title="知识详情" :column="2" :size="small" border>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <Document />
          </el-icon>
          知识标题
        </div>
      </template>
      {{ data.zsbt }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <FullScreen />
          </el-icon>
          问题类型
        </div>
      </template>
      {{ data.wtlx }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <location />
          </el-icon>
          问题场景
        </div>
      </template>
      {{ data.wtcj }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <UserFilled />
          </el-icon>
          发布者
        </div>
      </template>
      <el-tag size="small">{{ data.fbz }}</el-tag>
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <Timer />
          </el-icon>
          发布时间
        </div>
      </template>
      {{ data.fbsj }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <Timer />
          </el-icon>
          失效时间
        </div>
      </template>
      {{ data.shixsj }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <office-building />
          </el-icon>
          问题内容
        </div>
      </template>
      {{ data.wtnr }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <office-building />
          </el-icon>
          问题同义句
        </div>
      </template>

      <el-tag class="ml-2" v-for="item in wtItems">
        {{ item }}
      </el-tag>
      <!-- <div v-for="item in wtItems">
        <el-tag class="ml-2">{{ item }}</el-tag>
      </div> -->
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <office-building />
          </el-icon>
          回答内容
        </div>
      </template>
      {{ data.hdnr }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <office-building />
          </el-icon>
          回答同义句
        </div>
      </template>
      <el-tag class="ml-2" type="success" v-for="item in hdItems">
        {{ item }}
      </el-tag>
      <!--  <div v-for="item in hdItems" v-if="wtItems!=null&&wtItems.length>0">
        <el-tag class="ml-2" type="success">{{ item }}</el-tag>
      </div> -->
    </el-descriptions-item>
    <el-descriptions-item v-if="data.fj != null && data.fj != ''">
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <office-building />
          </el-icon>
          附件
        </div>
      </template>
      <!-- 显示附件 -->
      <!-- <el-image
        style="width: 100px; height: 100px"
        v-if="data.fj != null && data.fj != ''"
        :src="data.fj"
        :fit="fit"
      /> -->
      <!-- 根据附件类型，显示附件图标 -->
      <img src="/src/assets/images/fileImg/img.png" class="record-img" v-if="fileSuffix === 'png' ||
        fileSuffix === 'jpg' ||
        fileSuffix === 'jpeg' ||
        fileSuffix === 'ico' ||
        fileSuffix === 'bmp' ||
        fileSuffix === 'gif'
        " />
      <img src="/src/assets/images/fileImg/docx.png" class="record-img"
        v-else-if="fileSuffix === 'doc' || fileSuffix === 'docx'" />
      <img src="/src/assets/images/fileImg/xlsx.png" class="record-img"
        v-else-if="fileSuffix === 'xls' || fileSuffix === 'xlsx'" />
      <img src="/src/assets/images/fileImg/zip.png" class="record-img" v-else-if="fileSuffix === 'zip'" />
      <img src="/src/assets/images/fileImg/rar.png" class="record-img" v-else-if="fileSuffix === 'rar'" />
      <img src="/src/assets/images/fileImg/pdf.png" class="record-img" v-else-if="fileSuffix === 'pdf'" />
      <img src="/src/assets/images/fileImg/file.png" class="record-img" v-else />
      <el-button link type="primary" @click="handlePreview(data.fj)">
        预览
      </el-button>
      <el-button link type="info" @click="handleDownload(data.fj)">
        下载
      </el-button>

    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <office-building />
          </el-icon>
          是否生效
        </div>
      </template>
      <el-tag v-if="data.sfshenx == '0'" type="warning">审核中</el-tag>
      <el-tag v-if="data.sfshenx == '1'" type="success">已生效</el-tag>
      <el-tag v-if="data.sfshenx == '2'" type="info">已失效</el-tag>
      <el-tag v-if="data.sfshenx == '3'" type="info">审核未通过</el-tag>
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <office-building />
          </el-icon>
          所属公司
        </div>
      </template>
      {{ data.gsmc }}
    </el-descriptions-item>
  </el-descriptions>

  <!-- 文件预览 -->
  <el-dialog v-model="preViewVisible" :width="'80%'">
    <preview :fileSuffix="fileSuffix" :imageSrc="imageSrc"></preview>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { getDetailApi } from '@/api/knowledgeBase/knowledge.js'
import { useRoute } from 'vue-router'
import useCloseTag from '@/hooks/useCloseTag'
import { downloadFileApi } from "@/api/oss";
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'
//引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel'
//引入相关样式
import '@vue-office/excel/lib/index.css'
//引入VueOfficePdf组件
import VueOfficePdf from '@vue-office/pdf'
import preview from '@/components/Preview/index.vue'

const { closeTag } = useCloseTag()
const route = useRoute()
const data = ref({})
const size = ref('')
const wtItems = ref([]) // 问题同义句
const hdItems = ref([]) // 回答同义句
const fileSuffix = ref("")// 文件类型

// 预览窗口是否可见
const preViewVisible = ref(false)
// 预览的文件URL
const imageSrc = ref('')

const iconStyle = computed(() => {
  const marginMap = {
    large: '8px',
    default: '6px',
    small: '4px',
  }
  return {
    marginRight: marginMap[size.value] || marginMap.default,
  }
})

// 点击下载
const handleDownload = (fileUrl) => {
  console.log("下载文件")
  downloadFileApi({ url: fileUrl }).then(res => {
    const blob = new Blob([res.data]);  // 把得到的结果用流对象转一下
    var a = document.createElement("a"); //创建一个<a></a>标签
    a.href = URL.createObjectURL(blob); // 将流文件写入a标签的href属性值
    a.download = data.value.fj.substring(data.value.fj.lastIndexOf('/')+1); // 设置文件名
    a.style.display = "none";  // 障眼法藏起来a标签
    document.body.appendChild(a); // 将a标签追加到文档对象中
    a.click(); // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
    a.remove(); // 一次性的，用完就删除a标签
  })

}

// 点击预览
const handlePreview = (fileUrl) => {
  console.log("预览文件")
  preViewVisible.value = true
  console.log(fileUrl + "==========================")
  imageSrc.value = fileUrl
}

// 获取详情信息
const getDetail = () => {
  getDetailApi(route.params.id).then(res => {
    data.value = res.data

    // 获取文件类型
    fileSuffix.value = (res.data.fj == null || res.data.fj == "") ? "" : res.data.fj.split('.').pop()
    // wtItems.value = data.value.wttyj.split('|')

    var temp = data.value.wttyj.split('|')
    if (temp != null && temp.length > 0 && temp[0] != '') {
      wtItems.value = temp
    } else {
      wtItems.value = []
    }

    // hdItems.value = data.value.hdtyj.split('|')
    var temp = data.value.hdtyj.split('|')
    if (temp != null && temp.length > 0 && temp[0] != '') {
      hdItems.value = temp
    } else {
      hdItems.value = []
    }
  })
}
getDetail()
</script>

<style scoped>
.record-img {
  width: 40px;
  height: 40px;
}

.el-descriptions {
  margin-top: 20px;
}

.cell-item {
  display: flex;
  align-items: center;
  width: 80px;
}

.margin-top {
  margin-top: 20px;
}
</style>
